<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
	<head>
		<base href="${pageContext.request.contextPath}/">
		<meta charset="utf-8">
		<title></title>
		<link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
		<script src="js/jquery-3.2.1.min.js"></script>
		<script src="js/bootstrap.js"></script>
		<style>
			.container-fluid {
				background-color: #eff4fa;
				padding-top: 10px;
				padding-bottom: 10px;
				height: 62px;
			}

			.emailLogo {
				margin-left: 15px;
			}

			.header_link {
				float: right;
				overflow: hidden;
				padding-right: 17px;
				line-height: 42px;
				text-align: right;
				color: #b6b6b6;
				margin-right: 15px;
				font-size: 5px;
			}



			.content {
				width: 960px;
				margin: 32px auto;
				padding: 0 24px;
			}

			.content_wrapper {
				min-height: 372px;
				padding-top: 40px;
				margin: 0 20px 60px 25px;
			}

			.login_container {
				float: right;
				border: 1px solid #a0b1c4;
				width: 334px;
				height: 387px;
				background-color: #fff;
				position: relative;
				z-index: 12;
				padding: 0;
				border-radius: 5px;
				overflow: hidden;
			}

			.xm_login_card {
				position: relative;
				width: 100%;
				height: 100%;
			}

			.xm_login_card_tab {
				height: 50px;
				font-size: 0;
				border-bottom: 1px solid #a0b1c4;
				background-color: #f9fbfe;
				border-radius: 6px 6px 0 0;
			}

			.xm_login_card_tab_item {
				float: left;
				width: 50%;
				font-size: 16px;
				line-height: 50px;
				color: #999;
				text-align: center;
				cursor: pointer;
			}

			.xm_login_card_cnt {
				position: relative;
				width: 100%;
				height: 347px;
				padding: 30px;
			}

			.btn {
				background: none;
				height: 30px;
				line-height: 15px;
				width: 100%;
				outline: none;
				font-weight: normal;
				margin-top: 20px;
			}

			.checkbox {
				margin-top: 30px;
				text-align: center;
				margin-bottom: 20px;
			}

			.bottom {
				margin-bottom: 5px;
				width: 284px;
				right: 25px;
				bottom: 12px;
				text-align: center;
				font-size: 8px;
			}

			.login_pictures_picture {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				height: 500px;
				width: 100%;
				background-repeat: no-repeat;
				background-position: right center;
			}

			.login_pictures_txt {
				padding-top: 25px;
				position: relative;
				font-size: 14px;
				font-weight: normal;
				line-height: 24px;
			}

			.login_pictures_title {
				line-height: 26px;
				margin-top: 15px;
				margin-bottom: 15px;
				font-size: 24px;
				font-weight: normal;
				color: #6f95c8;
			}

			.footer {
				position: fixed;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 2;
				clear: both;
				line-height: 36px;
				text-align: center;
				color: #b6b6b6;
				background-color: #eff4fa;
				border-top: 1px solid #d6dfea;
				font-size: 12px;
			}
			.commonFrame_recordnumber {
			    line-height: 20px;
			    margin-bottom: 5px;
			}
		
		</style>
	</head>
	<body>
		<!-- .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。 -->
		<!-- 头部 -->
		<div class="container-fluid">
			<img src="image/邮箱logo.png"  class="emailLogo" height="42px">
			<div class="header_link">
				<a href="https://wap.mail.qq.com">基本版</a>
				&nbsp;|&nbsp;
				<a href="https://en.mail.qq.com">English</a>
				&nbsp;|&nbsp;
				<a href="https://app.mail.qq.com/" target="_blank">手机版</a>
				&nbsp;|&nbsp;
				<a href="https://exmail.qq.com?referrer=index_top" target="_blank">企业邮箱</a>
			</div>
		</div>
		<!-- 内容 -->
		<div class="content" style="position: relative;">
			<div class="content_wrapper">
				<div class="xm_login_container login_container" id="login"
					style="width: 330px; height: 336px; visibility: visible;">
					<div class="xm_login_card">
						<div class="xm_login_card_tab">
							<div class="xm_login_card_tab_item" id="wxLoginTab">微信登录</div>
							<div class="xm_login_card_tab_item xm_login_card_tab_item_Active" id="qqLoginTab">QQ登录</div>
						</div>
						<div class="xm_login_card_cnt" style="height: 347px;">
							<form method="post" action="login">
								<div class="form-group">
									<input type="text" class="form-control" id="exampleInputEmail1" name="mailboxNo"
										placeholder="支持QQ号/邮箱/手机号登录" value="${param.mailboxNo}">
								</div>
								<div class="form-group">
									<input type="password" class="form-control" id="exampleInputPassword1" name="password"
										placeholder="QQ密码">
								</div>

								<button type="submit" class="btn btn-default">登录</button>

								<div class="checkbox">
									<label>
										<input type="checkbox"> <span>下次自动登录</span>
									</label>
								</div>
								<div class="bottom">
									<a href="https://ssl.ptlogin2.qq.com/ptui_forgetpwd" class="link" id="forgetpwd"
										target="_blank">找回密码</a>
									<span class="dotted">|</span>
									<a href="https://reg.mail.qq.com" class="link" target="_blank">注册帐号</a>
									<span class="dotted">|</span>
									<a class="link" id="feedback_web" href="http://support.qq.com/discuss/350_1.shtml"
										target="_blank">意见反馈</a>
								</div>
							</form>
						</div>

					</div>

				</div>
				<div class="login_pictures">
					<div class="login_pictures_picture"
						style="background-image:url('image/login_picture.png');background-position:right 400px top 0px;">
					</div>
					<div class="login_pictures_txt">
						<p class="login_pictures_title">QQ邮箱，常联系！</p>
						<p>2500年前，人们飞鸽传书</p>
						<p>186年前，莫尔斯发明了电报</p>
						<p>53年前，第一封电子邮件发出</p>
						<p>今天，QQ邮箱联系你、我、他</p>
					</div>
				</div>
			</div>
		</div>
		<!-- 底部 -->
		<div class="footer" style="line-height: 28px; padding: 6px 20px;">
			<a href="https://www.tencent.com" target="_blank">关于腾讯</a>
			&nbsp;|&nbsp;
			<a href="https://wx.mail.qq.com/list/readtemplate?name=app_intro.html#/agreement/mailService"
				target="_blank">服务条款</a>
			&nbsp;|&nbsp;
			<a href="https://wx.mail.qq.com/list/readtemplate?name=app_intro.html#/agreement/appPolicy"
				target="_blank">隐私政策</a>
			&nbsp;|&nbsp;
			<a href="https://kf.qq.com/product/email.html" target="_blank">客服中心</a>
			&nbsp;|&nbsp;
			<a href="https://open.mail.qq.com/feedback/feedbackhome" target="_blank">联系我们</a>
			&nbsp;|&nbsp;
			<a href="https://service.mail.qq.com" target="_blank">帮助中心</a>
			&nbsp;|&nbsp;
			<span class="gray">©1998 - 2022 Tencent Inc. All Rights Reserved.</span>
			<div class="commonFrame_recordnumber"><a
					href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44030002000001"
					target="_blank">粤公网安备&nbsp;&nbsp;44030002000001号</a><a
					href="https://beian.miit.gov.cn/#/Integrated/index"
					target="_blank">ICP备案号&nbsp;&nbsp;粤B2-20090059</a><a
					href="https://rescdn.qqmail.com/qqmail/images/B2_20090059.jpg" class="last"
					target="_blank">增值电信业务经营许可证&nbsp;&nbsp;粤B2-20090059</a></div>
		</div>
	</body>
</html>
